<!DOCTYPE html>
<html>
<head>
  <title>.</title>
  <!-- <script>require('electron-connect').client.create()</script> -->
  <style type="text/css">
    * {
        border: 0;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        font-family: '宋体';
    }
    input{
      outline: none;
    }
    .login_box{
      width:300px;
      height:200px;
      margin: 30px auto;
      text-align: center;
      font-size: 18px;
    }
    .login_form{
      width:100%;
      margin-top: 30px;
    }
    .login_form>div{
      width:100%;
      height: 30px;
      margin-top: 3px;
    }
    .login_form label{
      display: inline-block;
      width:20%;
      text-align:left;
    }
    .login_form .text{
      width:80%;
      height: 30px;
      border:none;
      box-shadow: 0 0 1px black, 0 0 1px black;
      padding: 3px 5px;
      font-size: 16px;
    }
    .login_form .login{
      width:100%;
      height:40px;
      background-color: black;
      color: white;
      margin-top: 15px;
      font-size: 20px;
      letter-spacing: 5px;
    }
    .error{
      box-shadow: 0 0 1px red, 0 0 1px red!important;
    }
  </style>
</head>
<body>
<div class="login_box">
  <h1>登录页面</h1>
  <div class="login_form">
    <div><label for="">账号:</label><input type="text" class="name text"></div>
    <div><label for="">密码:</label><input type="password" class="password text"></div>
    <input type="button" name="login" class="login" value="登录">
  </div>
</div>
</body>
</html>
<script type="text/javascript">
window.onload = () => {
    const electron = require('electron')
    const ipcRenderer = electron.ipcRenderer
    let login = document.querySelector('.login')
    let name = document.querySelector('.name')
    let password = document.querySelector('.password')
    login.addEventListener('click', function() {
      if (!valityName()) {
        return false;
      }
      if (!valityPassword()) {
        return false;
      }
      ipcRenderer.send('login_request', '')
    }, false)
    name.onkeydown = function(e) {
      if (e.keyCode == 13) {
        if (!valityName()) {
          name.focus()
          return false;
        }
        password.focus()
      }
    }
    password.onkeydown = function(e) {
      if (e.keyCode == 13) {
        if (!valityPassword()) {
          password.focus()
          return false;
        }
        login.click()
      }
    }
    function valityName() {
      if (name.value.toLowerCase() != 'admin') {
        if (name.className.indexOf('error') == -1) {
          name.className += ' error'
        }
        return false;
      } else {
        if (name.className.indexOf('error') != -1) {
          name.className = name.className.replace(/ error/i, '')
        }
      }
      return true;
    }
    function valityPassword() {
      if (password.value.toLowerCase() != 'admin') {
        if (password.className.indexOf('error') == -1) {
          password.className += ' error'
        }
        return false;
      } else {
        if (password.className.indexOf('error') != -1) {
          password.className = password.className.replace(/ error/i, '')
        }
      }
      return true;
    }
}
</script>